<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>语音素材</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp"%>

    <style type="text/css">
        .audio-stop {
            background: transparent url(${staticPath}/wechat/image/wechat-voice-stop.png) 0 0 no-repeat;
            width: 42px;
            height: 42px;
            vertical-align: middle;
            display: inline-block;
            background-size: 42px auto;
            cursor: pointer;
        }

        .audio-playing {
            background-image: url(${staticPath}/wechat/image/wechat-voice-playing1.gif);
        }
    </style>

</head>
<body>

<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">
            <div id="tool">
                <form id="uploadForm" class="form-inline" action="${ctx}/admin/wechat/voice/upload"
                      method="post" enctype="multipart/form-data" style="margin-top:20px;margin-bottom:20px;">
                    <div class="form-group">
                        <button id="browseFile" type="button" class="btn btn-success"><i class="glyphicon glyphicon-cog"></i> 添加语音</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>大小不超过2M, 播放长度不超过60s</span>
                        <input type="file" id="file" name="file" style="width: 100%; height: 0px; opacity: 0; left: 0; right: 0;"
                               <%--mp3/wma/wav/amr--%>
                               accept="audio/amr,audio/mp3,audio/wma,audio/wav" onchange="checkFile(this)">
                    </div>
                </form>
            </div>
            <table id="table"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle("语音素材");

    var media = document.createElement("AUDIO");

    $(function() {

        $("#browseFile").bind('click', function() {
            $("#file").click();
        });

        $('#table').bootstrapTable({
            url: '${ctx}/admin/wechat/voice/page-list?search_EQL_wechatMpId=${currentWechatMpId}&order=desc&sort=created_time',
            idField : 'id',
            striped : true,
            pagination : true,
            pageNumber : 1,
            pageSize : 25,
            sidePagination : 'server',
            uniqueId : 'id',
            /*checkbox : true,
            clickToSelect : true,*/
            queryParams : queryParams,
            responseHandler : responseHandler,
            columns: [/*{
                field: 'ck',
                checkbox : true
            },*/
                {
                    title: '#',
                    width : 50,
                    align : 'center',
                    valign:'middle',
                    formatter: snFormatter
                },
                {
                    field: 'url',
                    title: '内容',
                    valign:'middle',
                    align : 'center',
                    formatter : function(value,row,index) {
                        return '<div onmousedown="playVoice(this)"><em class="audio-stop" title="点击播放" voiceUrl="'
                              + value + '"></em></div>';
                    }
                },
                {
                    field: 'title',
                    title: '标题',
                    valign:'middle',
                    align : 'center'
                },
                {
                    field: 'length',
                    title: '时长',
                    valign:'middle',
                    align : 'center'
                },
                {
                    field: 'createdTime',
                    title: '创建时间',
                    valign: 'middle',
                    align: 'center'
                },
                {
                    field: 'op',
                    searchable : true,
                    title: '操作',
                    valign:'middle',
                    align : 'center',
                    formatter : operateFormatter
                }
            ]
        });

        $(media).bind('ended', function() {
            $(".audio-playing").removeClass("audio-playing");
        });
    });

    function operateFormatter(value,row,index) {
        var content = '<a href="${ctx}/admin/wechat/voice/download?id=' + row.id + '" title="下载"><i class="iconfont icon-xiazai"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a title="编辑" onclick="modifyVoiceName(' + row.id + ', \'' + row.title + '\'' +')"><i class="iconfont icon-iconfontcolor32"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a href="javascript:del(' + row.id + ')" title="删除"><i class="iconfont icon-shanchu"></i></a>';
        return content;
    }

    function del(id,name) {
        carefulDelete('${ctx}/admin/wechat/voice/careful-delete',id,'请输入您的管理密码以确定删除此系统资源');
    }
    
    function playVoice(target) {
        // 取消当前在播放的音频，并且移除样式
        media.pause();
        $(".audio-playing").removeClass("audio-playing");

        $(media).attr("src", $(target).find(".audio-stop").attr("voiceUrl"));
        $(target).find(".audio-stop").addClass("audio-playing");
        media.play();
    }

    function modifyVoiceName(id, title) {
        topLayer.prompt({
            formType: 0,
            value: title,
            title: '请输入语音标题',
            btnAlign: 'c',
            area: ['800', '500']
        }, function(value, index, elem){
            $.get(
                '${ctx}/admin/wechat/voice/update?id=' + id + '&title=' + value,
                function(result) {
                    var json = JSON.parse(result);
                    if (json.code == "OK") {
                        $('#table').bootstrapTable('refresh');
                    }
                    topLayer.msg(json.message, {icon: 1});
                    topLayer.close(index);
                },
                'json'
            );
        });
    }

    function checkFile(file) {
        var filePath = file.value;
        var fileExt = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        <%--mp3/wma/wav/amr--%>
        if (!fileExt.match(/.mp3|.wma|.wav|.amr/i)) {
            topLayer.msg("您选择的文件格式不正确, 请重新选择", { icon: 1});
            file.value = "";
            return;
        }
        if (file.files && file.files[0]) {
            if ((file.files[0].size / 1024 / 1024) > 2) {
                topLayer.msg("语音大小不能超过2M, 请重新选择", { icon: 1 });
                file.value = "";
                return;
            }
            $("#uploadForm").submit();
        }
    }
</script>
</body>
</html>
